<template>
	<view class="page">
		<!-- 提现方式选择 -->
		<view class="section">
			<view class="title">提现方式</view>
			<view class="item" @click="selectPayType('alipay')">
				<image src="https://admin.cqycgyl.com/uploads/20250909/380b8093f4e6edc7ee2b5f0d9e21b9a9.png"></image>
				<view class="text">支付宝账户</view>
				<view class="radio" :class="{ active: payType === 'alipay' }">√</view>
			</view>
			<view class="item" @click="selectPayType('wechat')">
				<image src="https://admin.cqycgyl.com/uploads/20250909/e99e9d7bff5bb96321dc3b12157e68df.png"></image>
				<view class="text">微信账户</view>
				<view class="radio" :class="{ active: payType === 'wechat' }">√</view>
			</view>
			<view class="item" @click="selectPayType('bank')">
				<image src="https://admin.cqycgyl.com/uploads/20250909/53c7d2dcb9388b6e497adbded6a9afa0.png"></image>
				<view class="text">银行卡账户</view>
				<view class="radio" :class="{ active: payType === 'bank' }">√</view>
			</view>
		</view>

		<!-- 提现金额输入 -->
		<view class="section">
			<view class="title">提现金额</view>
			<view class="input-box">
				<view class="icon">¥</view>
				<input class="input" type="number" v-model="withdrawAmount" placeholder="请输入提现金额" />
				<view class="all" @click="withdrawAll">全部提现</view>
			</view>
			<view class="line"></view>
			<view class="available">可提现金额 ¥{{ availableAmount }}</view>
		</view>

		<!-- 提现说明 -->
		<view class="section">
			<view class="title">提现说明</view>
			<view class="desc">
				1、单笔提现金额 1 元至 200 元，建议提至微信零钱账户；2000 元以上建议提至银行卡账户。<br />
				2、提现次数 10 次 / 天，提现限额 2000 元 / 天。<br />
				3、银行卡提现手续费：费率为 0.3%。
			</view>
		</view>

		<!-- 提现按钮 -->
		<view class="withdraw-btn" @click="withdraw">立即提现</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 提现方式（默认选支付宝）
				payType: 'alipay',
				// 提现金额（初始为 0，可自定义）
				withdrawAmount: "",
				// 可提现金额（示例值，实际需从后端获取）
				availableAmount: 5.00,
			};
		},
		methods: {
			// 选择提现方式
			selectPayType(type) {
				this.payType = type;
			},
			// 点击“全部提现”时，金额设为可提现金额
			withdrawAll() {
				this.withdrawAmount = this.availableAmount;
			},
			// 提现操作（需对接后端）
			withdraw() {
				// 示例：验证金额是否有效
				if (this.withdrawAmount <= 0 || this.withdrawAmount > this.availableAmount) {
					uni.showToast({
						title: '提现金额无效',
						icon: 'none'
					});
					return;
				}
				// 实际开发中，此处需调用后端提现接口
				// uni.request({
				//   url: 'https://your-backend.com/withdraw',
				//   method: 'POST',
				//   data: {
				//     payType: this.payType,
				//     amount: this.withdrawAmount,
				//   },
				//   success: (res) => {
				//     if (res.data.code === 0) {
				//       uni.showToast({ title: '提现成功', icon: 'success' });
				//       // 更新可提现金额（示例：减去提现金额）
				//       this.availableAmount -= this.withdrawAmount;
				//     } else {
				//       uni.showToast({ title: res.data.msg, icon: 'none' });
				//     }
				//   },
				// });
			},
		},
	};
</script>
<style>
	.line {
		border: 2rpx solid #EFEFEF;
	}
	/* 页面容器 */
	.page {
		padding: 30rpx;
		background: #F6F8F7;
	}

	/* 每个功能区块 */
	.section {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: white;
		padding: 30rpx;
	}

	/* 区块标题 */
	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 40rpx;
	}

	/* 提现方式 - 单个选项 */
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
		margin-bottom: 40rpx;
	}

	.item:last-child {
		border-bottom: none;
	}

	/* 提现方式 - 图标 */
	.item image {
		width: 44rpx;
		height: 44rpx;
	}

	/* 提现方式 - 文字 */
	.text {
		flex: 1;
		margin-left: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	/* 提现方式 - 单选按钮 */
	.radio {
		width: 36rpx;
		height: 36rpx;
		border: 2px solid #ccc;
		border-radius: 50%;
		display: flex;
		background-color: white;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.radio.active {
		border-color: #09bb07;
		background: #1DC57C;
	}

	/* 提现金额输入框 */
	.input-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.input-box .icon {
		width: 52rpx;
		height: 74rpx;
		font-weight: 400;
		font-size: 52rpx;
		color: #333333;

	}

	.input {
		flex: 1;
		height: 50rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
		border: 0px;
	}

	.all {
		font-weight: 400;
		font-size: 28rpx
	}

	.available {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 提现说明 */
	.desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 提现按钮 */
	.withdraw-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #09bb07;
		color: #fff;
		font-size: 32rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}
</style>